'''
1、定义：javascript中的所有事物都是对象（字符串、数值、数组、函数等），允许自定义对象，且对象可以拥有属性和方法
2、操作：
    <head>
    <script>
        // 使用顶级object类型创建对象
            var oPerson = new Object();
        // 添加属性
            oPerson.age = 10;
            oPerson.name = "张三";
        // 添加方法
            oPerson.show = function(){
              alert("我喜欢学习");
            }
        // 调用属性和方法
            alert(oPerson.age + oPerson.name);
            oPerson.show();
        // 使用字面量的方式创建对象
            var oStudent = {
                gender: "男",
                addr: "云南",
                show: function(){
                    alert("欢迎来这里玩")
                }
            }
            alert(oStudent.gender + oStudent.addr);
            oStudent.show();
    </script>
</head>
2、json
    ① 定义：JavaScript Object Notation，JS对象简谱，是一种轻量级的数据交换格式，采用完全独立于编程语言的文本格式来存储和表示数据
            本质上是字符串
    ② 优点：易于阅读和编写，易于机器解析和生成，有效提升网络传输效率
    ③ 格式：对象格式、数组格式
    ④ 操作：
        <head>
            <script>
                // 对象格式的json数据
                    var sJson1 = '{"name": "张三", "age": 20}';
                // 数组格式的json数据
                    var sJson2 = '[{"gender": "男", "addr": "上海"}, {"gender": "女", "addr": "上海"}]';
                // 浏览器获取对象格式的json数据转换成JavaScript对象
                    var oPerson1 = JSON.parse(sJson1);
                    alert(oPerson1);
                    console.log(oPerson1.name);
                // 浏览器获取数组格式的json数据转换成JavaScript对象
                    var oPerson2 = JSON.parse(sJson2);
                    console.log(oPerson2);
            </script>
        </head>
3、ajax
    ① 定义：Asynchronous JavaScript and XML，是一个前后台配合的技术，可以让JavaScript发送异步的http请求，与后台通信进行数据的获取
           当前端页面想和后台服务器进行数据交互就可以使用ajax
    ② 优点：实现局部刷新
    ③ 操作：
        <body>
            <!-- 页面搭建 -->
                <h1>天气查询</h1>
                <h3>请输入要查询的城市：</h3>
                <input type="text" id="input-text">
                <input type="button" value="查询" onclick="searchWeather()">
                <h3>查询结果：</h3>
                <ul>
                    <li>城市：<span id="city"></span></li>
                   <li>天气：<span id="weather"></span></li>
                </ul>
            <!-- ajax -->
                <script src="./js/jquery-3.7.1.min.js"></script>
                <script>
                    function searchWeather(){
                       var city = $("#input-text").val();
                       // url:请求地址
                       // type:请求方式，默认是'GET',常用的还有'POST'
                       // datatype：返回数据的格式，常用'json'
                       // data：发送给服务器的数据，没有参数可不设置（city=北京）
                       // success：请求成功后的回调函数
                       // error：请求失败后的回调函数
                       // async：是否异步，默认true，异步，一般不设置
                     $.ajax({
                            url:'https://www.tianqiapi.com/api/',
                            type:"get",
                            dataType:"json",
                            data:"city=" + city,
                            success:function(resp){
                                $("#city").text(resp.city);
                                $("#weather").text(resp.data[0].wea);
                         },
                         error:function(){
                             alert("获取不到天气信息，网络异常");
                         },
                         async: true
                     })
                  }
            </script>
        </body>
'''